<template>
<div id="playlist">
  <div class="top">
    <div class="left">
      <img :src="lists.coverImgUrl" alt="">
    </div>
    <div class="right">
      <div class="box">
        <div class="title">
          <h2>{{lists.name}}</h2>
        </div>
        <div class="info">
          <div class="portrait">
            <img :src="lists.creator.avatarUrl" alt="">
          </div>
          <div class="user-name">{{lists.creator.nickname}}</div>
<!--          <div class="time">{{lists.createTime}}创建</div>-->
        </div>
        <div class="label">标签：
            <span v-for="(item,index) in lists.tags" :key="index">{{item}}/</span>
        </div>
        <div class="brief">简介：{{lists.description}}</div>
      </div>
    </div>
  </div>
<!--  歌单列表-->
  <div class="content">
        <div>
          <table class="el-table">
            <thead>
            <tr>
              <th></th>
              <th></th>
              <th></th>
              <th>音乐标题</th>
              <th>歌手</th>
              <th>专辑</th>
              <th>时长</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in lists.tracks" :key="index" @click="aaaa(item.id)">
              <td>{{index+1}}</td>
              <td></td>
              <td>
                <div class="img-warp" >
                  <span><img src="../assets/images/play.png" alt="" class="play"></span>
                </div>
              </td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <span>{{item.name}}</span>
                  </div>
                </div>
              </td>
              <td> {{item.ar[0].name}}</td>
              <td>{{item.al.name}}</td>
              <td>{{item.dt}}</td>
            </tr>
            </tbody>
          </table>
        </div>
  </div>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "playlist",
  data(){
    return{
      id:'',
      activeName: 'songs',
      lists:{},
    }
  },
  created() {
    this.id = this.$route.query.id
    // console.log(this.$route.params);
    axios({
      url:'https://autumnfish.cn/playlist/detail',
      method:'get',
      params:{
        id:this.id
      }
    }).then(res=>{
      console.log(res)
      this.lists = res.data.playlist
    })
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    aaaa(id) {
      // console.log(id)
      axios({
        url: 'https://autumnfish.cn/song/url',
        params: {
          id
        }
      }).then(res => {
        let url = res.data.data[0].url
        this.$parent.musicUrl = url
      })
    },
    toPlaylist(id){
      this.$router.push(`/playlist?q=${id}`)
    }
  }
}
</script>

<style scoped>
#playlist{
  width: 100%;

}
.top{
  width: 100%;
  height: 210px;
  display: flex;
  margin-top: 20px;
  padding-bottom: 5px;
  border-bottom: 3px solid #dcdcdc;
}
.left{
  width: 20%;
  height: 210px;
  overflow:hidden;
  min-width: 240px;
}
.left img{
  width: 100%;
  height: 100%;
}
.right{
  width: 80%;
  height: 210px;
  min-width: 920px;
}
.box{
  margin-left: 35px;
  width: 920px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box .info{
  display: flex;
  height: 30px;
  line-height: 30px;
}
.box .info div{
  margin-right: 10px;
}
.box .info .portrait{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #2a4f61;
}
.box .info .portrait img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.box .info .user-name{
  font-size: 15px;
  font-weight: 600;
}

.label{
  font-size: 14px;
  color: #9e9e9e;
}

.brief{
  font-size: 15px;
  width: 920px;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/*歌单内容*/
.content{
  margin-top: 30px;
}

table{
  padding-bottom: 50px;
  /*background-color: #ffa22d;*/
}

.el-table  tr{
  width: 100%;
}
th{
  height: 40px;
  line-height: 40px;
  color: #000000;
}
td{
  height: 60px;
  line-height: 60px;
}


.img-warp{
  width: 60px;
  height: 60px;
  /*margin-top: 20px;*/
  position: relative;
  margin: auto;
}

.img-warp .img-warp-img{
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 5px;
}

.play{
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.active{
  color: #ffa22d;
}



</style>